<template>
  <div style="height:100%;width:100%;border-radius: 10px;border:2px #999 solid;
  text-align: center;box-sizing: border-box;cursor: default;
  position: relative;" @mousemove="handleMousemove($event)"
  >
    <div style="position: absolute;left:50%;top:50%;;text-align: center;"
         :style='{"transform":"translate(-50%,-50%) scale("+zoom+")"}'>
      Start
    </div>
    <div v-if="props.option.selected" style="position: absolute;left:100%;top:0;width:50px ;">
      <span @click="handleStartLink($event)">操作按钮</span>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ComponentOption} from "@/components/MPanel/ComponentOption.ts";
import {inject} from "vue";
import EventBus from "../../../EventBus.ts";
import {useHandleLinkEdit} from "../handleLinkEdit.ts";

const eventBus: EventBus = inject("eventBus")
const panelEvents: any = inject("panelEvents")
const panelStatus: any = inject("panelStatus")
const panelApi: any = inject("panelApi")
const props = defineProps<{
  option: ComponentOption,
  zoom: number,
}>();
const {handleMousemove, handleStartLink} = useHandleLinkEdit(panelStatus, panelApi, props.option, panelEvents, eventBus)

</script>
